<template>
	<view>
		<view class="top_bar"  >
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center">
				<!-- <text>详情</text> -->
			</view>
			<view  class="top_bar_right">
				<image src="../../static/three.png" mode=""></image>
			</view>
		</view>
		<view class="apply">
			<view class="apply_item" v-for="(item,index) in message" @click="toGroupDetail(item.username)" >
				<view class="item_image">
					<image :src="item.userimg" mode=""></image>
					<view class="news" v-if='item.tip!="0"'>
						{{ item.tip }}
					</view>
					<view v-if='item.group' class="group-show"></view>
				</view>
				<view class="item_data" >
					<view class="data_name">
						{{ item.username }}
					</view>
					<view class="data_main">
						{{ item.new_data }}
					</view>
					<view class="data_date">
						{{ item.datetime }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utails/request.js'
	import data1  from '../../commons/js/dateformat.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				message: [],
				tips:{} // 记录新消息的未读数量
			}
		},
		onLoad(e) {
			this.getFields(e.id)
		},
		
		methods: {
			async getFields(g_id){
					// 校验用户信息
					// let r = await checkUser()
					this.userinfo = uni.getStorageSync('userinfo')
					
					// 请求数据
					let res = await request.request({url:'/grouplist/',data:{userid:this.userinfo.id}})
					this.message = res
					
					// 加用户添加到join()
					if(res){
						res.forEach(v=>{
							this.socket.emit('group',v.id)
						})
					}
				
					// 处理时间数据
					this.message.forEach((v,i)=>{
						v.datetime = data1.format3(v.datetime)
						if(v.tip>=99){
							v.tip=99
						}
					})
				},
			// 点击群聊 群详情页
			toGroupDetail({username}){
				uni.navigateTo({
					url:'../grouphome/grouphome?groupname='+ username
				})	
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	/* 聊天区域 */
	.apply{
		position: absolute;
		top: 88rpx;
		left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.apply_item{
		flex: 1;
	}
	.item_image{
		float: left;
		padding: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.item_image image{
		height: 90rpx;
		width: 90rpx;
		border-radius: 30%;
		/* 防止图片显示不出来 */
		background-color: #f4ea2a;
	}
	/* 新消息提示 */
	.item_image .news{
		position: absolute;
		top:5rpx;
		right: 5rpx;
		height: 35rpx;
		width: 35rpx;
		background-color: red;
		font-size: 16rpx;
		text-align: center;
		line-height: 35rpx;
		color: white;
		border-radius: 16rpx;
	}
	
	.item_data{
		/* float: left;
		width: 540rpx; */
		margin-left: 120rpx;
		width: 75vw;
		padding: 0 15rpx;
		padding-top: 25rpx;
		position: relative;
		
	}
	.data_name{
		
	}
	.data_main{
		font-size: 26rpx;
		color: #808080;
	    display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.data_date{
		position: absolute;
		right: 5rpx;
		top:25rpx;
		font-size: 16rpx;
	}
	
	/* 请求添加好友 */
	#application{
		height: 60rpx;
		width: 60rpx;
	}
	
	/* 群特有图标 */
	.group-show{
		position: absolute;
		bottom: 16rpx;
		right: 14rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 8rpx;
		opacity: 0.8;
		background-color: #f4ea2a;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.2);
		z-index: 100;
	}
</style>
